<template>
    <div class="common-login">
        <el-form-item label="用户名" prop="username">
            <el-input type="username" v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
            <el-input maxlength="5" v-model="loginForm.captcha" class="captcha" ref="captcha"
                @keydown.native.enter="submitForm('loginForm')"></el-input>
            <span class="captcha-svg" v-loading="loading">
                <i v-html="captcha" @click="getCaptcha"></i>
            </span>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>

        </el-form-item>
        <el-form-item>
            <div class="bigBox">
                <span class="sms">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iphone"></use>
                    </svg>
                </span>
                <a href="#" class="text1" @click="$emit('changeSmsType')">切换短信登入</a>

            </div>

        </el-form-item>

    </div>

</template>
<script>
import * as api from "@/api/user"
export default {
    mounted() {
        this.getCaptcha()
    },
    data() {
        return {
            captcha: "",//验证码 
            loading: false,
            loginForm: {
                username: "",
                password: "",
                captcha: ""
            }
        }
    },
    watch: {
        loginForm: {
            handler(newVal) {
                // console.log(newVal)
                this.$emit("syncHandle", newVal)
            },
            deep: true
        }
    },
    methods: {
        submitForm() {
            // console.log()
            this.$emit("submit")

        },
        // 封装一个获取验证码的方法
        getCaptcha() {
            this.loading = true
            api.getCaptcha()
                .then(res => {
                    this.captcha = res.data.img
                    // 关掉加载动画
                    this.loading = false
                })
        }

    }
}



</script>
<style lang="less" scoped>
.bigBox{
    // text-align: center;
    margin-left: 70px;
}
.text1 {
    color: white;
    font-size: 15px;
    text-align: center;
    // margin-left: 80px;
}

.img {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin-left: 120px;
}

p {
    text-align: center;
    color: white;
}

.box {
    position: relative;
}

.el-input {
    /deep/ .el-input__inner {
        width: 250px;
    }
}

.container {

    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.Login {
    width: 450px;
    height: 550px;
    // border: 1px solid black;
    background-color: rgba(0, 0, 0, 0.4);
    // display: flex;
    // justify-content: center;
    // align-items: center;
    position: absolute;
    right: 100px;
    top: 130px;

}

.textStyle {
    color: white;
    text-align: center;
    margin: 60px 0 40px 0;

}

.submit {

    margin-top: 50px;
}

.el-button {
    width: 250px;
}

/deep/ .captcha {
    width: 100px;
    vertical-align: top;

    .el-input__inner {
        width: 100%;
        height: 45px;
        border-radius: 5px 0 0 5px;
        border: 0;
        font-size: 18px;
    }

}




svg path {
    stroke: red;
}

.captcha-svg {
    background: #fff;
    display: inline-block;
    height: 45px;
    width: 150px;
    text-align: center;
    cursor: pointer;
    border: 0;
    border-radius: 0px 5px 5px 0;
}
</style>